<template>
  <div class="archives-merge">
    <el-dialog :visible.sync="editConfig.visible" :width="dialogWidth" :before-close="handleClose">
      <div class="content" style="position: relative">
        <div class="dia_title">
          <p>{{ editConfig.title }}</p>
          <div class="close-box">
            <el-image :src="closeUrl" class="img-right" @click.native="handleClose"></el-image>
          </div>
        </div>
        <div class="dia_top">
          <div class="dia_top_left">
            <div class="image_box">
              <img :src="'/httpImage/' + editConfig.infomation.personPicUrl" fit="fill" />
            </div>
          </div>
          <div class="dia_top_right">
            <div class="right_no">档案编号：{{ editConfig.infomation.id || "--" }}</div>
            <div class="ri_bottom">
              <div class="ri_bottom_tip">请输入需要合并的档案编号</div>
              <el-input placeholder="请输入" v-model="input" clearable size="medium" style="width: 200px"> </el-input>
              <div class="ri_bottom_btn" @click="repSureClick">确定</div>
            </div>
          </div>
        </div>
        <div class="dia_tips">注：请谨慎操作，确定后合并的档案编号会清除，数据会显示当前档案编号下！</div>
        <div class="dia_label_box">
          <div class="dia_line"></div>
          <div class="dia_label">预合并的档案信息</div>
        </div>
        <div class="dia_bottom">
          <div v-if="Object.keys(this.repPersonInfo).length !== 0" class="dia_bottom_left">
            <div class="image_box">
              <img :src="'/httpImage/' + repPersonInfo.personPicUrl" fit="fill" />
            </div>
          </div>
          <div v-if="Object.keys(this.repPersonInfo).length !== 0" class="dia_bottom_right">
            <div class="dia-b-item dia-b-item_label">档案编号：{{ repPersonInfo.id || "--" }}</div>
            <div class="dia-b-item">档案标签：{{ repPersonInfo.id2 || "--" }}</div>
            <div class="dia-b-item">小区：{{ repPersonInfo.residentialArea || "--" }}</div>
            <div class="dia-b-item">社区：{{ repPersonInfo.community || "--" }}</div>
            <div class="dia-b-item">建档时间：{{ repPersonInfo.createTime || "--" }}</div>
            <div class="dia-b-item">档案地点：{{ repPersonInfo.location || "--" }}</div>
            <div class="dia-b-item">抓拍次数：{{ repPersonInfo.snapshotCount || "--" }}</div>
            <div class="dia-b-item">出现天数：{{ repPersonInfo.daysAppeared || "--" }}</div>
            <div class="dia-b-item">最后出现时间：{{ repPersonInfo.lastAppearanceTime || "--" }}</div>
          </div>
        </div>
        <div class="dia_merge_btn" @click="mergeClick">档案合并</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPersonDocumentInfo, personDocumentMerge } from "@/api/statisticsQueryManage/portraitFilingPage"
import NewDate from "@/api/date"
const { formatDate2 } = NewDate
export default {
  name: "archivesMergeDialog",
  mixins: [],
  props: {
    editFormDialog: {
      type: Object,
      default: () => {
        return {
          title: "档案合并",
          visible: false,
          infomation: {}
        }
      }
    }
  },
  computed: {},
  data() {
    return {
      editConfig: this.editFormDialog,
      dialogWidth: "39%",
      closeUrl: require("@/assets/img/close.png"),
      input: "",
      repPersonInfo: {}
    }
  },
  created() {
    console.log(this.editConfig, "98989")
  },
  mounted() {},
  watch: {},
  methods: {
    handleClose() {
      this.pedestalList = []
      this.editConfig.visible = false
    },
    // 确定
    repSureClick() {
      if (this.input.length > 0) {
        if (this.input == this.editConfig.infomation.id) {
          this.$message.error("操作有误，请仔细核对档案编号！")
        } else {
          this.getInfo()
        }
      } else {
        this.$message.error("请输入需要合并的档案编号")
      }
    },
    // 查询档案编号
    async getInfo() {
      let params = {}
      params.id = this.input
      await getPersonDocumentInfo(params).then((res) => {
        if (res.success) {
          this.repPersonInfo = res.data || {}
          this.repPersonInfo.lastAppearanceTime = formatDate2(this.repPersonInfo.lastAppearanceTime * 1000)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 合并
    mergeClick() {
      if (Object.keys(this.repPersonInfo).length === 0) {
        this.$message.error("请输入需要合并的档案编号")
      } else {
        this.$confirm(`操作不可撤销，请确认是否合并档案信息？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            personDocumentMerge({
              mainPersonID: this.editConfig.infomation.id,
              targetPersonID: this.repPersonInfo.id
            }).then((res) => {
              if (res.success) {
                this.$message.success("合并成功")
                this.handleClose()
                this.$parent.getInfo()
                this.$parent.getData()
              } else {
                this.$message.error(res.msg)
              }
            })
          })
          .catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // });
          })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.archives-merge {
  width: 760px;
  height: 734px;
  color: #fff;
  .dialog-header {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #fff;
    height: 65px;
    background: #0a1a34;
  }
  .content {
    width: 760px;
    height: 734px;
    background-image: url("/public/panoramicData/pic_alert_bg.png");
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    padding: 0 20px;
    position: relative;
    .dia_title {
      color: #fff;
      padding: 20px 25px;
      font-size: 28px;
      border-bottom: 1px solid #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        margin: 0;
      }
      .el-image {
        display: block;
      }
      .close-box {
        margin-top: 10px;
        .el-image {
          width: 17px;
          height: 17px;
          cursor: pointer;
        }
      }
    }
    .dia_top {
      margin: 40px auto 0;
      width: 681px;
      height: 131px;
      background: rgba(46, 94, 171, 0.3);
      border: 3px solid rgba(51, 254, 254, 0.3);
      box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      .dia_top_left {
        width: 110px;
        box-sizing: border-box;
        margin: 0 10px;
        .image_box {
          width: 110px;
          height: 110px;
          display: inline-block;
          position: relative;
          cursor: pointer;
          .el-image,
          img {
            width: 100%;
            height: 100%;
            border-radius: 26px;
            display: inline-block;
            position: relative;
          }
          p {
            width: 100%;
            margin: 0;
            border-bottom-left-radius: 26px;
            border-bottom-right-radius: 26px;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 20px;
            line-height: 20px;
            opacity: 1;
            background: rgba(21, 21, 21, 0.5);
          }
        }
      }
      .dia_top_right {
        width: calc(100% - 110px - 12px);
        margin-left: 15px;
        .right_no {
          font-family: "AlibabaPuHuiTi";
          font-size: 18px;
          font-weight: bold;
          color: #ffffff;
        }
        .ri_bottom {
          margin-top: 10px;
          display: flex;
          .ri_bottom_tip {
            width: 195px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: 6px;
            background: #0e9cff;
            font-family: Poppins;
            font-size: 14px;
            font-weight: normal;
            color: #ffffff;
          }
          .ri_bottom_btn {
            margin-left: 17px;
            width: 79px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            border-radius: 50px;
            background: rgba(10, 26, 52, 0.6);
            border: 1px solid rgba(89, 175, 249, 0.7049);
            box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
            color: #01c2ff;
            cursor: pointer;
          }
        }
      }
    }
    .dia_tips {
      margin: 20px auto 0;
      width: 681px;
      font-family: "AlibabaPuHuiTi";
      font-size: 14px;
      font-weight: normal;
      color: #ffffff;
      text-align: right;
    }
    .dia_label_box {
      margin: 30px 0 0 15px;
      width: 177px;
      height: 28px;
      border-radius: 8px;
      background: #0d284f;
      display: flex;
      align-items: center;
      .dia_line {
        height: 15px;
        width: 3px;
        border-radius: 2px;
        background: #29f1fa;
        margin-left: 10px;
      }
      .dia_label {
        margin-left: 10px;
        font-family: "SourceHanSans";
        font-size: 12px;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.87);
        text-shadow: 0px 0px 15px rgba(27, 126, 242, 0.91);
      }
    }
    .dia_bottom {
      margin: 20px auto 0;
      width: 681px;
      display: flex;
      .dia_bottom_left {
        width: 110px;
        box-sizing: border-box;
        margin: 0 10px;
        .image_box {
          width: 110px;
          height: 110px;
          display: inline-block;
          position: relative;
          cursor: pointer;
          .el-image,
          img {
            width: 100%;
            height: 100%;
            border-radius: 26px;
            display: inline-block;
            position: relative;
          }
          p {
            width: 100%;
            margin: 0;
            border-bottom-left-radius: 26px;
            border-bottom-right-radius: 26px;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 20px;
            line-height: 20px;
            opacity: 1;
            background: rgba(21, 21, 21, 0.5);
          }
        }
      }
      .dia_bottom_right {
        // height: calc(100% - 50px - 50px);
        overflow-y: auto;
        margin-left: 25px;
        line-height: 24px;
        .dia-b-item {
          margin-bottom: 6px;
          font-family: "AlibabaPuHuiTi";
          font-size: 14px;
          font-weight: normal;
          font-variation-settings: "opsz" auto;
          color: rgba(255, 255, 255, 0.9);
        }
        .dia-b-item_label {
          font-weight: bold;
        }
      }
    }
    .dia_merge_btn {
      position: absolute;
      right: 40px;
      bottom: 40px;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 50px;
      background: rgba(10, 26, 52, 0.6);
      border: 1px solid rgba(89, 175, 249, 0.7049);
      box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
      color: #01c2ff;
      cursor: pointer;
    }
  }
}
::v-deep {
  .el-input__inner {
    background: rgba(119, 121, 123, 0.1);
    color: #fff;
  }
}
</style>
<style lang="scss">
.el-dialog {
  background: unset;
}
.el-dialog__header {
  padding: 0 20px;
  background: #0a1a34;
  border-bottom: 0px solid #e5e5e5;
}
.el-dialog__headerbtn {
  display: none;
}
.el-dialog__body {
  background: #0a1a34;
  width: 760px;
}
// .dia_con{
//   display:flex;
//   margin:30px 0px;
//   justify-content: space-between;
//   .dia_con_left{
//     margin-left:20px;
//     display:flex;
//     align-items: center;
//     color:#fff;
//     .vector{
//       width: 55px;
//       height: 48px;
//       border-radius: 6px;
//       opacity: 1;
//       background: #D8D8D8;
//       text-align:center;
//       line-height:48px;
//     }
//     .vector_info{
//       margin-left:10px;
//       p{
//         margin:0;
//       }
//       p:nth-of-type(1){
//         font-size:18px;
//       }
//       p:nth-of-type(2){
//         opacity: 1;
//         font-family: Poppins;
//         font-size: 14px;
//         font-weight: 500;
//         line-height: 21px;
//         letter-spacing: 0px;
//         color: #8291A9;
//       }

//     }
//   }
//   .dia_con_right{
//     margin-right:20px;
//     display:flex;
//     align-items: center;
//     .el-button{
//       width: 90px;
//       // height: 33px;
//       // line-height: 33px;
//       border-radius: 8px;
//       opacity: 1;
//       box-sizing: border-box;
//       border: 1px solid #03F396;
//       background:unset;
//       font-size: 18px;
//       font-weight: 500;
//       text-align: center;
//       letter-spacing: 0px;
//       color: #00FF9D;
//     }
//   }
// }
// .vidicon{
//   width:100%;
//   color:#fff;
//   p{
//     margin:0px 20px;
//   }
//   ul{
//     width:100%;
//     display:flex;
//     flex-wrap: wrap;
//     li{
//       width:50%;
//       box-sizing:border-box;
//       display:flex;
//       text-align:"right";
//       margin:10px 0px;
//       p{
//         width:50%;
//         box-sizing:border-box;
//         margin:0;
//         // text-align:right;
//       }
//       p:nth-of-type(1){
//         text-align:right;
//       }
//       p:nth-of-type(2){
//         margin-left:20px;
//       }
//     }
//   }
// }
// .connect_vidicon{
//   p{
//     text-align:right;
//   }
//   .vidicon_vedio{
//     width:100%;
//     height:300px;
//     background:#000;
//     margin:0 auto;
//   }
// }
</style>
